<#include 'layout/template.ftl'/>
<@htmlHead title=''>
	<link rel="stylesheet" href="${resources}/css/fileupload.css" />
	<style>
	#allmap {width:100%;height:500px;}
	#visible-list img.middle{
		width:240px;
		height:120px;
	} 
	</style>
</@htmlHead>


<@htmlBody 'merchant'  'merchant'   >

	<#include 'layout/breadcrumbs.ftl'>
	<@breadcrumbs '管理'   '新增'></@breadcrumbs>
	
	<!-- page-content begin -->
	<div class="page-content">
			
		<!-- page-header begin -->
		<div class="page-header">
				<h1>
					新增限天超商户
				</h1>
		</div>
		<!-- page-header end -->

		<!-- page-body begin -->
		<div class="row">	
			<div class="col-md-6 ">
				
				<!-- 表单开始 -->
				<form class="form-horizontal" id="validation-form" method="post" action="${path}/manage/merchant/merchant/create" >
						<div class="form-group">
							<label class="control-label col-md-2">商圈:</label>
							<div class="col-md-10">
								<div class="clearfix">
									<select id="districtid" name="districts.id">
										<option value="">请选择父商圈</option>
										<#list businessDistrictList as item>
											<option value="${item.id}">${item.name}</option>								
										</#list>
									</select>
									<select id="districtidParentId" name="district.id">
										<option value="">请选择子商圈</option>
										<#list businessDistrictLists as items>
											<option value="${items.id}">${items.name}</option>								
										</#list>
									</select>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-2">市场:</label>
							<div class="col-md-10">
								<div class="clearfix">
									<select id="marketid" name="market.id">
										<option value="">请选择市场</option> 
											<option value="3">品牌购</option>								
									</select>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-2">限天超类型:</label>
							<div class="col-md-10">
								<div class="clearfix">
									<select id="type" name="type">
										<option value="">请选择限天超类型</option> 
											<option value="1">限时抢购</option>	
                                            <option value="2">天天特价</option>
                                        	<option value="3">超低折扣</option>
                                        	<option value="4">线下商品</option>		
									</select>
								</div>
							</div>
						</div> 
						
						<div class="form-group">
							<label class="control-label col-md-2">开始时间:</label>
							<div class="col-md-10">
								<div class="clearfix">
									<input type="text" class="form-control"  name="startTime"  id="startTime" value="" />
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-2">结束时间:</label>
							<div class="col-md-10">
								<div class="clearfix">
									<input type="text" class="form-control"  name="endTime"  id="endTime" value="" />
								</div>
							</div>
						</div>
						
						<div class="form-group">
							<label class="control-label col-md-2">商户登陆名:</label>
							<div class="col-md-10">
								<div class="clearfix">
									<input type="text" class="form-control"  name="username"  id="username"  />
									<p class="form-control-static">密码为手机号后六位</p>
								</div>
							</div>
						</div>
						
						
						<!-- 商户详情 -->
						<div class="hr hr-dotted" style="border-top: 2px dotted #AAA"></div>
							
						<div class="form-group">
							<label class="control-label col-md-2">名称:</label>
							<div class="col-md-10">
								<div class="clearfix">
									<input type="text" class="form-control"  name="name"  id="name" value="${ merchant.name  }" />
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-2">联系人:</label>
							<div class="col-md-10">
								<div class="clearfix">
									<input type="text" class="form-control"  name="linkman"  id="linkman" value="${ merchant.linkman  }" />
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-2">电话:</label>
							<div class="col-md-10">
								<div class="clearfix">
									<input type="text" class="form-control"  name="telephone"  id="telephone" value="${ merchant.telephone  }" />
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-2">地址:</label>
							<div class="col-md-10">
								<div class="clearfix">
									<input type="text" class="form-control" placeholder="请输入详细地址" name="address"   id="address" value="${merchant.address}" />
									<input type="hidden" name="longitude"   id="longitude" value="${merchant.longitude}" />
									<input type="hidden" name="latitude"   id="latitude" value="${merchant.latitude}" />
									<div id="allmap"></div>
											
								</div>
							</div>
						</div>
						
						<div class="form-group">
							<label class="control-label col-md-2 no-padding-right" >详情:</label>
							<div class="col-md-10">
								<div class="clearfix">
									<textarea path="intro" id="intro" name="intro" style="width:100%;">${ merchant.intro  }</textarea>		
								</div>
							</div>
						</div>

					
						<div class="form-group">
							<label class="control-label col-md-2">商户图片:</label>
							<div class="col-md-10">
							
								<div class="clearfix">
									<div class="settingView">
										<img id="file_0_pic" src="${ merchant.picurl  }"/>
										<input class="picinput" multiple="" type="file" name="file" id="file_0" data-id="file_0" data-img="file_0_pic"  data-txt="file_0_txt" />
										<input name="picurl" id="picurl" value="" type="hidden">
									</div>
								</div>
							</div>
						</div>
						
							
							<!-- 上传多张图片 -->	
							<input id="uppath"   type="hidden" value="${path}/upload/pic/120/120">
							<div id="invisible-list" style="display:none;"></div>
								
							<div class="form-group">  
								<label   class="col-md-2 control-label no-padding-right">商户详情图:</label>
								<div class="col-md-10">
									<ul id="visible-list" class="list-unstyled clearfix">
				               		</ul>
								 	<input id="num" style="display: none;" value="">
									<label class="ace-file-input">
									 	<table id="fields-table" class="table table-striped table-bordered table-hover">
											<tr id="tr0">
												<td style="width: 420px;">
													<input class="form-control" type="file" id="id-input-file"   name="file"  onchange="addPic(this)" >
												  	<span style="width: 400px;margin-top: 10px;margin-left: 5px;"  class="ace-file-container"  data-title="上传">
														<span  class="ace-file-name">
															<p id="filename">点击这里上传文件</p><i class=" ace-icon fa fa-upload"></i>
														</span>
													</span>
													<a class="remove" href="#"><i class=" ace-icon fa fa-times"></i></a>
												</td>
												
												<td>
													<button type="button" data="0" class="btn btn-default dropdown-toggle" onclick="createView()">确定</button>
												</td>
										   </tr>
										</table>	
									</label>
								</div>  
							</div>
						
						<div class="form-group">
							<label class="control-label col-md-2">推荐菜单:</label>
							<div class="col-md-10">
								<div class="clearfix">
									<input type="text" class="form-control"  name="chiefDishes"  id="chiefDishes" value="${ merchant.chiefDishes  }" />
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-2">排序:</label>
							<div class="col-md-10">
								<div class="clearfix">
									<input type="text" class="form-control"  name="seq"  id="seq" value="${ merchant.seq  }" />
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-2">分成比例:</label>
							<div class="col-md-10">
								<div class="clearfix">
									<input type="text" class="form-control"  name="scale"  id="scale" value="${ merchant.scale  }" />
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-2">银行卡:</label>
							<div class="col-md-10">
								<div class="clearfix">
									<input type="text" class="form-control"  name="cardno"  id="cardno" value="${ merchant.cardno  }" />
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-2">持卡人:</label>
							<div class="col-md-10">
								<div class="clearfix">
									<input type="text" class="form-control"  name="cardholder"  id="cardholder" value="${ merchant.cardholder  }" />
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-2">所属银行:</label>
							<div class="col-md-10">
								<div class="clearfix">
									<input type="text" class="form-control"  name="bank"  id="bank" value="${ merchant.bank  }" />
								</div>
							</div>
						</div>
						
							
						
						<div class="col-md-8 center">
                    		<button type="submit" class="btn btn-primary">
								<i class="fa fa-save align-top bigger-125"></i>保存
							</button>
					 
							<button type="reset" class="btn">
								<i class="fa fa-pencil align-top bigger-125"></i>重置
							</button>
						</div>	
					
				</form>
				<!-- 表单结束 -->
			</div>
		</div>
		<!-- page-body end -->
		
	</div>		
	<!-- page-content end -->
	
</@htmlBody>

<@htmlBodyScript>

	<!-- 验证框架 -->	
	<script src="${resources}/plugins/jquery-validation/jquery.validate.min.js"></script>
	<script src="${resources}/plugins/jquery-validation/messages_zh.min.js"></script>
	<script type="text/javascript">

			jQuery.validator.addMethod("isName", function(value, element) {       
	 			var corpName =  /^[\u0391-\uFFE5\w\-\s\.]{1,50}$/;
  				 return this.optional(element) || corpName.test(value);       
 			}, "请使用汉字、英文字母、数字、下划线、减号、空格或点");   
 			
	
			$('#validation-form').validate({
				errorElement: 'div',
				errorClass: 'help-block',
				focusInvalid: false,
				rules: {
						"username": {	
						required:true,
						maxlength: 50,
						isName:true,
						remote: {
							   url: "${path}/manage/system/user/unique/username",
							   type: "post",
							   dataType: "json", 
							   data: {
							       "username": function() {
							            return $("#username").val();
							        }
							    }
						}
					},
					"district.id": {
						required:true
					},
					"market.id": {
						required:true
					},
					name: {
						required:true,
						maxlength:32
					},
					linkman: {
						required:true,
						maxlength:32
					},
					telephone: {
						required:true,
						maxlength:32
					},
					address: {
						required:true,
						maxlength:100
					},
					intro: {
						maxlength:255
					},
					picurl: {
						required:true
					},
					chiefDishes: {
						maxlength:100
					},
					longitude: {
						required:true
					},
					latitude: {
						required:true
					},
					seq: {
						required:true,
						digits:true
					},
					"district.id": {
						required:true
					},
					"districtidParentId.id": {
					required:true
					},
					"type": {
					required:true
					},
					startTime: {
						required:true
					},
					endTime: {
						required:true
					}  
					 
				},
		
				messages: {
				  "username":{
						remote:"登录名重复"
					}
				},
		
		
				highlight: function (e) {
					$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
				},
		
				success: function (e) {
					$(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
					$(e).remove();
				},
		
				errorPlacement: function (error, element) {
					if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
						var controls = element.closest('div[class*="col-"]');
						if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
						else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
					}
					else if(element.is('.select2')) {
						error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
					}
					else if(element.is('.chosen-select')) {
						error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
					}
					else error.insertAfter(element.parent());
				},
		
				submitHandler: function (form) {
					editor.sync();
					form.submit();
				},
				invalidHandler: function (form) {
				}
			});
	</script>
	
	
	
	<!-- 图片 -->	
	<script src="${resources}/plugins/fileupload/ajaxfileupload.js"></script>
	<!-- 多张 -->
	<script src="${resources}/plugins/fileupload/upload.merchant.multiple.js"></script>
	<!-- 单张 -->
	<script src="${resources}/plugins/fileupload/upload.single.js"></script>
	<script>
	
	
		//上传图片
		$(".picinput").uploadPreview({
			Width: 200,
			Height: 200,
			IsCompression: true,
			Url: "${path}/upload/pic",
			Success: showSuccess,
			Error:showError,
			
		});
			//回调函数
		function showSuccess(id,url){
			$("#"+id).val(url);
			$("#picurl").val(url);
		}
		function showError(id,error){
			alert(error);
		}
	

		$("#districtid").change(function(){
			var pid = $(this).find("option:selected").val();
			if(pid==""){
				//alert("请选择父节点");
				return;
			}
			$.ajax({
				url:"${path}/manage/merchant/merchant/ajaxChild?pid="+pid,
				type:"post",
				success:function(data){
					var html = "<option value=''>请选择</option>";
					if(data.length>0){
						for(var i=0;i<data.length;i++){
							html+="<option value='"+data[i].id+"'>"+data[i].name+"</option>";						}
					}
					$("#districtidParentId").html(html);
				}
			})
		})
	
	</script>
	
	<!-- 富文本编辑器 -->
	<script charset="utf-8" src="${resources}/plugins/kindeditor/4.1.10/kindeditor.js"></script>
	<script charset="utf-8" src="${resources}/plugins/kindeditor/4.1.10/lang/zh_CN.js"></script>
	<!-- 实例化编辑器 -->
	<script type="text/javascript">
		//内容
		var editor;
		KindEditor.ready(function(K) {
				editor = K.create('#intro', {
						resizeType : 1,
						pasteType  : 1,
						uploadJson : '${path}/richtext/upload/pic/0/0',
						height : "350px",
						items : ['source', '|',
								'undo', 'redo', '|', 
								'cut', 'copy', 'paste','|',
							   'justifyleft', 'justifycenter', 'justifyright','justifyfull','|',
							   'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',  'superscript','|',
							   'image', 'table', 'hr', 'link', 'unlink', '|', 
							   'title', 'fontname', 'fontsize', 'forecolor','hilitecolor','|',
							   'bold', 'italic', 'underline', 'removeformat', '|', 'about'],
						afterSetData : function(id) {}
				});
		});
	</script>
	
	<!-- 百度地图 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xVvsn3oF1vhtA1Ggi4ZfW4VWWgP3wmML"></script>
	<!-- 地图 -->
	
	 <link rel="stylesheet" href="${resources}/plugins/bootstrap-datetimepicker/2.3.4/css/bootstrap-datetimepicker.min.css" />
 	<script src="${resources}/plugins/bootstrap-datetimepicker/2.3.4/js/bootstrap-datetimepicker.js"></script>
   	<script src="${resources}/plugins/bootstrap-datetimepicker/2.3.4/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>	
	<script type="text/javascript">
		$(function(){
			// 百度地图API功能
			var map = new BMap.Map("allmap");    // 创建Map实例
			map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  //初始化地图,设置中心点坐标和地图级别
			map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
			map.setCurrentCity("北京");          //设置地图显示的城市 此项是必须设置的
			map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
		})
	
		$("#address").blur(function(){
			if($("#address").val()!=''){
				 allmap();
				 }
		    
   		 });		
		
		//定位文本框中的地址 获取地址的经纬度
		function allmap(){
			var address=$("#address").val();
			// 百度地图API功能
			var map = new BMap.Map("allmap");
			map.enableScrollWheelZoom(true);   //启用滚轮放大缩小，默认禁用
			map.enableContinuousZoom(true);    //启用地图惯性拖拽，默认禁用
			//单击获取点击的经纬度
			map.addEventListener("click",function(e){
			//	alert(e.point.lng + "," + e.point.lat);
			});
			var point = new BMap.Point(116.331398,39.897445);
			map.centerAndZoom(point,12);
			// 创建地址解析器实例
			var myGeo = new BMap.Geocoder();
			// 将地址解析结果显示在地图上,并调整地图视野
			myGeo.getPoint(address, function(point){
				
				
				if (point) {
					// 将经纬度放入隐藏域
					$("#longitude").val(point.lng); //经度
					$("#latitude").val(point.lat);//纬度
					// 设置地图缩放比例
					map.centerAndZoom(point, 16);
					// 设置地图选中地址标注
					map.addOverlay(new BMap.Marker(point));
				}else{
					alert("您选择地址没有解析到结果!");
				}
			}, "北京市");
			
		}
		
		  $("#startTime,#endTime").datetimepicker({
				bootcssVer:3,
			    format: "yyyy-mm-dd hh:ii:ss",
			    language:"zh-CN",
				weekStart: 1,
	        	todayBtn:  1,
				autoclose: 1,
				todayHighlight: 1,
				startView: 2,
				minView: 1,
				forceParse: 0
			});
		
	</script>
	
</@htmlBodyScript>	



